	.bodys {
	height: 100vh;
	overflow: auto;
	}
	
	.introduce{
		height: 6rem;
		 background-image: linear-gradient(#388ef1 , #7dc8ff);
		display: flex;
		justify-content: center;
		.myself{
			width: 90%;
			height:3.5rem;
			background-image: linear-gradient(#1ba5ff,  #69a4ff);
			border-radius: 15px;
			border-bottom-right-radius: 0px;
			border-bottom-left-radius: 0px;
			display: flex;
			align-items: center;
			position: relative;
			img{
				display: block;
				width: 2rem;
				height: 2rem;
				margin: 0 .5rem;
			}
			.introduce_content{
				width: 5rem;
				height: 2.5rem;
				display: flex;
				flex-direction: column;
				justify-content: center;
				span{
					display: flex;
					height: .7rem;
					align-items: center;
					color: #fff;
				}
				.name{
					font-size: .45rem;
				}
				.company{
					display: flex;
					align-items: center;
					.company_text{
						display: block;
						align-items: center;
						justify-content: center;
						height: .6rem;
						line-height: .65rem;
						text-indent: .1rem;
						border-radius: .2rem;
						background-color: #307EEB;
						font-size: .3rem;
						width: 100%;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
				}
				.work{
					display: flex;
					font-size: .35rem;
					.vertical{
						margin: 0 .55rem;
					}
				}
			}
			.message_label{
				width: 2rem;
				height: .6rem;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				border-top-left-radius: .3rem;
				border-bottom-left-radius: .3rem;
				background-color: #F9AD0C;
				font-size: .3rem;
				position: absolute;
				right: 0;
				top: .45rem;
			}
		}
		
	}
	.calendar{
		width: 95%;
		height: 4.5rem;
		background-color: #fff;
		transform: translateY(-2.5rem);
		margin: auto;
		border-radius: 10px;
		.calendar_list{
			height: 1.5rem;
			width: 95%;
			margin: auto;
			border-bottom: 1px solid #DEDEDE;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.first_calendar{
				width: 40%;
				height: .9rem;
				background-color: #EFF3F6;
				border-radius: 5px;
				display: flex;
				align-items: center;
				img{
					display: block;
					width: .45rem;
					height: .45rem;
					margin: .3rem;
				}
				.first_time{
					display: block;
					font-size: .4rem;
				}
			}
			.calendar_text{
				display: block;
				font-size: .2rem;
				color: #AAAAAA;
			}
		}
		
		.month{
			width: 95%;
			height: 3rem;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			.month_content{
				width: 1rem;
				height: 1rem;
				margin-left: .45rem;
				font-size: .3rem;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				border-radius: 50%;
				margin-top: .3rem;
				.month_judge{
					width: .15rem;
					height: .15rem;
					border-radius: 50%;
					background-color: red;
					position: absolute;
					right: -.1rem;
					top: .2rem;
				}
			}
		}
		
	}
	.statistics{
		width: 95%;
		height: 4.5rem;
		background-color: #fff;
		margin: auto;
		border-radius: 10px;
		transform: translateY(-2.2rem);
		position: relative;
		.chartTitle{
			display: flex;
			width: 100%;
			height: 1rem;
			align-items: center;
			position: absolute;
			top: .1rem;
			left: 0;
			.chartimg{
				display: block;
				width: 5px;
				height: .45rem;
				background-color: #318FDF;
				border-radius: 2px;
				margin:0 .25rem;
			}
			.chartname{
				display: block;
				height: .5rem;
				line-height: .5rem;
				font-size: .4rem;
				font-weight: 700;
				color: #373737;
			}
		}
		.myChart{
			width: 100%;
			height: 4.5rem;
		}
	}
	
	
	.use{
		width: 95%;
		height: 7.7rem;
		background-color: #fff;
		margin: auto;
		border-radius: 10px;
		transform: translateY(-1.9rem);
		.useTitle{
			display: flex;
			width: 100%;
			height: 1rem;
			align-items: center;
		    justify-content: space-between;
			.usecontent{
				display: flex;
				.useimg{
					display: block;
					width: 5px;
					height: .45rem;
					background-color: #318FDF;
					border-radius: 2px;
					margin:0 .25rem;
				}
				.usename{
					display: block;
					height: .5rem;
					line-height: .5rem;
					font-size: .4rem;
					font-weight: 700;
					color: #373737;
				}
			}
			.usemore{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 1.3rem;
				height: .5rem;
				font-size: .35rem;
				color: #B3B2B7;
			}
	}
	.useplan{
		width: 100%;
		height: 6.5rem;
		overflow-y:scroll ;
		margin-top: .2rem;
		scrollbar-width: none; /* firefox */
		-ms-overflow-style: none; /* IE 10+ */
		&::-webkit-scrollbar {
		    display: none; /* Chrome Safari */
		  }
		.useplanList{
			height: 1rem;
			width: 90%;
			margin: auto;
			display: flex;
			align-items: center;
			margin-bottom: .5rem;
			.useplan_left{
				display: block;
				width: 1rem;
				height: 1rem;
				margin-right: .3rem;
			}
			.useplan_right{
				flex: 1;
				height: 1rem;
				display: flex;
				flex-direction: column;
				.useplan_right_top{
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: .5rem;
					margin-bottom: .3rem;
					.useplan_title{
						font-size: .4rem;
						color: #9F9EA4;
					}
					.useplan_number{
						.useplan_number_img{
							height: .3rem;
						}
						.useplan_number_figure{
							font-size: .4rem;
						}
					}
				}
			}
		}
	}
	}
	
	.flow{
		width: 100%;
		background-color: #F1F5F8;
		margin: auto;
		border-radius: 10px;
		.flowTitle{
			display: flex;
			width: 100%;
			height: 1rem;
			align-items: center;
			.flowimg{
				display: block;
				width: 5px;
				height: .45rem;
				background-color: #318FDF;
				border-radius: 2px;
				margin:0 .25rem;
			}
			.flowname{
				display: block;
				height: .5rem;
				line-height: .5rem;
				font-size: .4rem;
				font-weight: 700;
				color: #373737;
			}
			}
	}
	